<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6">
          <el-button @click="handleAdd" icon="Plus" type="primary">
            新增
          </el-button>
        </el-col>
      </el-row>
      <el-row class="ml10" v-show="showSearch">
        <el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
          <el-form-item label="姓名" prop="cusName">
            <el-input placeholder="请输入姓名" style="max-width: 180px" v-model="state.queryForm.cusName" />
          </el-form-item>
          <el-form-item label="手机号" prop="cusTel">
            <el-input placeholder="请输入手机号" style="max-width: 180px" v-model="state.queryForm.cusTel" />
          </el-form-item>
          <el-form-item label="客户来源" prop="cusSource">
            <el-select v-model="state.queryForm.cusSource" placeholder="请选择客户来源">
              <el-option v-for="item in startTypeDict" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList" icon="search" type="primary">
              查询
            </el-button>
            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
          :data="state.dataList"
          @selection-change="handleSelectionChange"	style="width: 100%"
          v-loading="state.loading"
          border
          :cell-style="tableStyle?.cellStyle"
          :header-cell-style="tableStyle?.headerCellStyle"
      >
        <el-table-column label="全选" align="center" type="selection" width="40" />
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="姓名" prop="cusName" show-overflow-tooltip />
        <el-table-column label="手机号" prop="cusTel" show-overflow-tooltip />
        <el-table-column label="客户来源" prop="cusSource" show-overflow-tooltip>
          <template #default="scope">
            {{ getCustomerSourceLabel(scope.row.cusSource) }}
          </template>
        </el-table-column>
        <el-table-column label="订单数" prop="orderCount" show-overflow-tooltip >
          <template #default="scope">
            <span v-if="scope.row.orderCount >0" style="color: blue;text-decoration: underline;cursor: pointer;" @click="handleOrderCountClick(scope.row.orderCount)">{{ scope.row.orderCount }}</span>
            <span v-else>{{ scope.row.orderCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行程数" prop="tripCount" show-overflow-tooltip >
          <template #default="scope">
            <!-- 条件判断：订单数大于 0 时显示可跳转样式，否则显示普通数字 -->
            <span v-if="scope.row.tripCount > 0" style="color: blue; text-decoration: underline; cursor: pointer;" @click="handleTripNumberClick(scope.row.tripCount)">{{ scope.row.tripCount }}</span>
            <span v-else>{{ scope.row.tripCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="handleUpdate(scope.row)" text type="primary" style="margin-right: 5px">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页组件 -->
      <el-pagination
          :current-page="state.pagination?.current"
          :page-sizes="state.pagination?.pageSizes"
          :page-size="state.pagination?.size"
          :total="state.pagination?.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle" style="margin-top: 20px; text-align: center"
      />
    </div>

    <!-- 编辑、新增  -->
    <form-dialog @refresh="getDataList()" ref="formDialogRef" />
  </div>
</template>

<script lang="ts" name="systemPost" setup>import { BasicTableProps, useTable } from '/@/hooks/table';
import { page} from '/@/api/customer/customer';
// import { useMessage} from '/@/hooks/message';
// import { ElMessageBox } from 'element-plus';
import { useDict } from '/@/hooks/dict';
import { useRouter } from 'vue-router';

//路由跳转
const router = useRouter();

const { cus_source } = useDict('cus_source')
const startTypeDict = cus_source;
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义变量内容
const formDialogRef = ref();
// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

// 定义客户来源字典
const customerSourceDict = {
  0: '飞猪',
  1: '58同城',
  2: '其他'
};

// 获取客户来源标签
const getCustomerSourceLabel = (value: number) => {
  return customerSourceDict[value] || '未知';
};

//状态和变量定义
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: page,//表格数据
});

//在父组件中添加，查看分页接口返回
const { getDataList,tableStyle ,currentChangeHandle,sizeChangeHandle} = useTable(state);
// 页面挂载时加载数据
onMounted(() => {
  getDataList(); // 关键：初始化加载表格数据
});

const handleAdd =() =>{
  formDialogRef.value.openDialog('');
}

// 清空搜索条件
const resetQuery = () => {
  queryRef.value.resetFields();
  getDataList();
};

// 多选事件
const handleSelectionChange = (objs: { postId: string }[]) => {
  selectObjs.value = objs.map(({ postId }) => postId);
  multiple.value = !objs.length;
};
//
const handleUpdate = (row:any) => {
  formDialogRef.value.openDialog(row.cusId);
};
// 点击行程单号跳转方法
const handleTripNumberClick = (tripCount: number) => {
  if(tripCount >0){
    router.push({
      path: '/trip/index',
      params: { tripCount }
    });
  }

};

const handleOrderCountClick = (orderCount:number) => {
  // 跳转到订单页面
  if (orderCount > 0) {
    router.push({
      path: '/order/orders/index',
      params: { orderCount }
    });
  }
};

</script>
